<template>
  <main>
    <h2>Du的首页</h2>
    <section>
      <router-link to="/index">首页</router-link>
      <router-link to="/course">二级页面</router-link>
      <router-link to="/detail/1">三级页面</router-link>
      <router-link to="/lanqiao">自选1</router-link>
      <router-link to="/employment">自选2</router-link>
      <router-link to="/job-detail?type=前端开发&id=1">自选3</router-link>
    </section>
  </main>
</template>
<style scoped>
h2 {
  line-height: 100px;
  font-size: 33px;
  background-color: #00aaff;
  color: #fff;
  text-align: center;
}
section {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  margin: 10px;
}
a {
  line-height: 33px;
  font-size: 20px;
  color: #fff;
  background-color: #00aaff;
  transition: all 0.4s;
  margin: 8px;
  padding: 5px 40px;
  overflow: hidden;
}
a:hover {
  letter-spacing: 5px;
  background-color: #056fa4;
}
</style>
